<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user-login.css"
          type="text/css" media="all">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/user-login.js"></script>
    <script>
        /*
            1.表单校验
              a.用户名: 正则表达式
              b.密码: 正则表达式
              c.email: 邮件格式
        */
        //用户名校验 -> 正则表达式,长度
        function checkUsername(){
            //alert("用户名校验");
            //1.获取用户名的值
            var username = $("#username").val();
            //2.定义正则表达式
            var reg_username = /^\w{4,17}$/;
            //3.判断 并且给出提示信息
            var flag = reg_username.test(username);
            if(flag){
                //符合,则校验通过
                $("#username").css("border","");
            }else {
                //不符合,则校验不通过
                $("#username").css("border","1px solid red");
            }
            return flag;
        }
        //密码校验
        function checkPwd(){
            //1.获取用户名的值
            var password = $("#password").val();
            //2.定义正则表达式
            var reg_password = /^\w{4,17}$/;
            //3.判断 并且给出提示信息
            var flag = reg_password.test(password);
            if(flag){
                //符合,则校验通过
                $("#password").css("border","");
            }else {
                //不符合,则校验不通过
                $("#password").css("border","1px solid red");
            }
            return flag;
        }
        //邮箱校验
        function checkEmail(){
            //1.获取用户名的值
            var email = $("#email").val();
            //2.定义正则表达式  @163.com
            var reg_email = /^\w+@\w+\.\w+$/;
            //3.判断 并且给出提示信息
            var flag = reg_email.test(email);
            if(flag){
                //符合,则校验通过
                $("#email").css("border","");
            }else {
                //不符合,则校验不通过
                $("#email").css("border","1px solid red");
            }
            return flag;
        }


        //页面加载函数
        $(function (){

            //1.当表单提交时,调用所有的校验方法
            $("#registerForm").submit(function (){
                //alert("111");
                if (checkUsername() && checkPwd() && checkEmail()) {
                    //? unername=lucy&&password=123
                    //a.发送数据到服务器 - 确定请求方式
                    //alert("111");
                    $.ajax({url:"${pageContext.request.contextPath}/user/register",
                        type :"post",
                        data:$("#registerForm").serialize(),
                        dataType:"json",
                        success:function (data) {
                            if (data.flag){
                                location.href="${pageContext.request.contextPath}/user/registerOK";
                            }else{
                                //alert("注册失败")
                                $("#registermsg").html(data.errorMsg)
                            }

                        },
                        error:function (data) {

                        },
                    });

                }
                return false;
            });
            //2.当一个组件失去焦点时,开始校验
            $("#username").blur(checkUsername);
            $("#password").blur(checkPwd);
            $("#email").blur(checkEmail);


            //登录
            $("#loginForm").submit(function () {
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/login",
                    type :"post",
                    data:$("#loginForm").serialize(),
                    dataType:"json",
                    success:function (data) {
                        if (data.flag){
                            location.href="${pageContext.request.contextPath}/animation/index";
                        }else{
                            //alert("111")
                            // $("#checkCode").attr("src","${pageContext.request.contextPath}/user/checkCode?"+new Date().getTime());
                            $("#loginmsg").html(data.errorMsg);

                        }

                    },
                    error:function (data) {
                        //alert(3);
                        $("#loginmsg").html(data.errorMsg);
                    },
                });
                return false;
            });
        });
    </script>
</head>
<body>
<div class="dowebok ${requestScope.login ? "" : "right-panel-active"}" id="dowebok">
    <div class="form-container sign-up-container">
        <form id="registerForm" action="${pageContext.request.contextPath}/user/register" method="post">
            <h1>注册</h1>
            <div class="social-container">
            </div>
            <input type="text" name="username" id="username" placeholder="账号">
            <input type="text" name="name" id="name" placeholder="姓名">
            <input type="email" name="email" id="email" placeholder="电子邮箱">
            <input type="password" name="password" id="password" placeholder="密码">
            <button>注册</button>
            <span id="registermsg" style="color: red;"></span>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form id="loginForm" method="post" action="${pageContext.request.contextPath}/user/toLogin">
            <h1>登录</h1>
            <div class="social-container">
            </div>
            <input type="text" name="username" placeholder="账号">
            <input type="password" name="password" placeholder="密码">
            <tr>

                <td class="td_right check">
                    <input type="text" id="check" name="check" class="check" placeholder="验证码">
                    <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src="checkCode?"+new Date().getTime();
                        }
                    </script>
                </td>
            </tr>
            <a href="${pageContext.request.contextPath}/user/findUser">忘记密码？</a>
            <button>登录</button>
            <span id="loginmsg" style="color: red;"></span>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>已有帐号？</h1>
                <p>请使用您的帐号进行登录</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>没有帐号？</h1>
                <p>立即注册加入我们，和我们一起开始旅程吧</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
